<template>
  <uni-popup ref="popup" type="dialog">
    <view class="popup-container">
      <view class="popup-header">
        <text class="title">导入BOSS数据</text>
        <uni-icons type="close" size="24" @click="close" />
      </view>
      
      <view class="popup-content">
        <text>您收到了分享的BOSS数据，请选择处理方式</text>
      </view>
      
      <view class="popup-footer">
        <button class="btn cancel" @click="close">取消</button>
        <button class="btn merge" @click="handleMerge">合并到分组</button>
        <button class="btn create" @click="handleCreate">新建分组</button>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  name: "import-confirm-popup",
  methods: {
    open() {
      this.$refs.popup.open();
    },
    close() {
      this.$refs.popup.close();
    },
    handleMerge() {
      this.$emit('merge');
    },
    handleCreate() {
      this.$emit('create');
    }
  }
}
</script>

<style scoped>
.popup-container {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  width: 80vw;
  max-width: 600rpx;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.popup-content {
  padding: 15px 0;
  font-size: 15px;
}

.popup-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

.btn {
  flex: 1;
  margin: 0 5px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  border-radius: 6px;
}

.cancel {
  background-color: #f8f8f8;
  color: #666;
}

.merge {
  background-color: #007aff;
  color: white;
}

.create {
  background-color: #4CAF50;
  color: white;
}
</style>